<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>账户信息</span>
            </div>
        </template>
        <el-form :model="form" label-width="120px">
            <el-form-item label="账户">
                <el-input v-model="form.username" disabled />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.fullname" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男" />
                    <el-radio label="女" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机">
                <el-input v-model="form.tel" />
            </el-form-item>
            <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="http://localhost:3003/upload/common" :show-file-list="false"
                    :headers="headers" accept=".jpeg,.png,.jpg" :on-success="handleAvatarSuccess" :data="extra"
                    :on-error="handleUploadError" :before-upload="handleBeforeUpload" :on-remove="handleRemove">
                    <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup>
import admin from '@/api/admin'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useInfoStore } from '@/stores/counter'
let form = ref({});

// 添加token
let token = sessionStorage.token;
let headers = { Authorization: `Bearer ${token}` };
// 附加参数
let extra = { type: 'common' };
// 上传失败
let handleUploadError = (error, uploadFile) => {
    let { status, msg } = JSON.parse(error.message);
    ElMessage.error(msg);
}
const handleBeforeUpload = (rawFile) => {
    console.log(rawFile);
    let isValid = /^image\/(jpeg|png|jpg)$/.test(rawFile.type);
    if (!isValid) {
        ElMessage.error('头像必须是jpg/png格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像体积不能大于2MB!')
        return false
    }
    return true
}
const handleAvatarSuccess = ({ status, msg, src }, uploadFile) => {
    //如果上传成功
    if (status) {
        // 生成图片的地址
        form.value.avatar = src;
        console.log(src);
        // form.avatar = URL.createObjectURL(uploadFile.raw);
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}
let info = useInfoStore();
let loadList = () => {
    info.loadInfo(sessionStorage.id)
    let { profile } = storeToRefs(info);
    // console.log(profile.value.username);
    form.value = { ...profile.value }
}
loadList()
let onSubmit = async () => {
    info.editInfo(form.value);
}
</script>
<style scoped>
.editor-box {
    border: 1px solid #ccc;
    border-radius: 3px;
}

.el-input {
    width: 200px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>